<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="Index">
        <!-- 筛选区 -->
        <table-search-bar :config="requestBodyConfig" :model="requestBody" title="" @search="searchClicked"/>
        <!-- 内容 -->
        <div class="container">
            <!-- 功能按钮 -->
            <!--<div class="table-buttons">-->
            <!--    <el-button v-permission="permission.add" type="primary" @click="addData"><b-icon name="bi-plus" size="20"/>添加</el-button>-->
            <!--</div>-->
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table
                    ref="VXETable"
                    :column-config="{ resizable: false}"
                    :data="state.list"
                    :loading="state.isLoading"
                    :radio-config="{trigger: 'row', highlight: true}"
                    :row-config="{isCurrent: true, isHover: true, keyField: 'id'}"
                    :tree-config="{childrenField: 'children', reserve: true}"
                    border
                    round
                    show-overflow
                    size="small"
                    @current-change="() => {}"
                    @radio-change="() => {}"
                    >
                <template #empty>
                    <el-empty :image-size="100"/>
                </template>
                <vxe-column align="left" field="taskName" :fixed="$fixedColumn('left')" title="名称" width="200"></vxe-column>
                <vxe-column align="left" field="taskCode" title="编号" width="140"></vxe-column>
                <vxe-column field="isSuccess" min-width="100" title="成功">
                    <template #default="{ row }">
                        <el-tag v-if="row.isSuccess" type="success">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="concurrent" title="执行类型" width="120">
                    <template #default="{ row }">
                        <el-tag v-if="row.concurrent">并发</el-tag>
                        <el-tag v-else type="warning">串行</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="groupName" min-width="140" title="分组"></vxe-column>
                <vxe-column field="blocked" min-width="120" title="存在运行的任务">
                    <template #default="{ row }">
                        <el-tag v-if="row.blocked">是</el-tag>
                        <el-tag v-else type="warning">否</el-tag>
                    </template>
                </vxe-column>
                <vxe-column field="runTime" min-width="180" title="运行时间">
                    <template #default="{ row }">
                        <span>{{ filters.dateFilter(row.runTime) }}</span>
                    </template>
                </vxe-column>
                <vxe-column field="remark" min-width="200" title="备注"></vxe-column>
            </vxe-table>
            <div class="page-config">
                <vxe-pager
                        v-model:current-page="requestParams.pageIndex"
                        v-model:page-size="requestParams.pageSize"
                        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                        :page-sizes="pageConfig.sizes"
                        :total="pageConfig.total"
                        background
                        size="mini"
                        @page-change="onPageChange"/>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";
import * as api from "./api.js"

const {$message, $dayjs, $fixedColumn} = window;

const props = defineProps({
    options: {
        type: Object, default: () => {
        }
    }
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
// 当前路由
const route = useRoute();
// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: []
})
// 过滤器
const filters = computed(() => {
    return {
        dateFilter(val) {
            return $dayjs(val).format("YYYY-MM-DD HH:mm:ss")
        }
    }
})

// 当前页面功能权限
const permission = {
    add: "",
    edit: "",
    delete: "SysTaskLog:DeleteTaskLog"
};

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: false,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    "groupName": null,
    "isSuccess": null,
    "blocked": null
})
// 筛选区域配置
const requestBodyConfig = reactive({
    isSuccess: {label: "是否成功", component: "el-select-bool", data: [{name: "是", value: true}, {name: "否", value: false}]},
    blocked: {label: "存在运行的任务", component: "el-select-bool", data: [{name: "是", value: true}, {name: "否", value: false}]},
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})


// 删除
async function deleteData({id}) {
    console.danger("删除: ", id)
    const {success, data} = await api.DeleteTaskLog({id});
    if (!success) return 0;
    reload();
    $message.success("删除成功")
}

// 点击搜索
function searchClicked() {
    console.primary("搜索条件: ", requestBody)
    reload(true);
}

// 查询列表
async function loadList() {
    const params = {
        ...requestParams
    };
    const body = {
        ...requestBody,
        TaskCode: props.options.jobId
    };
    state.isLoading = true;
    const {success, data} = await api.GetTaskLogPageList(params, body);
    state.isLoading = false;
    if (!success) return 0;
    const {items, totalCount} = data;
    state.list = items;
    pageConfig.total = totalCount;
}

// 分页事件
function onPageChange({type}) {
    if (type === "current") {
        loadList()
    }
    if (type === "size") {
        reload(true)
    }
}

// 刷新
function reload(resetPageIndex) {
    if (resetPageIndex) requestParams.pageIndex = 1;
    loadList()
}


onMounted(() => {

    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
